<template>
  <el-radio-group @change="handleClickBtn" v-model="radioName">
    <el-radio-button
      :label="item.value"
      v-for="(item, index) in props.radioList"
      :key="index"
    >
      {{ item.label }}
    </el-radio-button>
  </el-radio-group>
</template>
<script  setup >
import { ref, reactive, onMounted, defineEmits } from "vue";

const radioName = ref(props.radioList[0].value);

const props = defineProps({
  radioList: {
    type: Array,
  },
});

const emits = defineEmits(["handleClickBtn"]);

const handleClickBtn = (val) => {
  emits('handleClickBtn', val)
    console.log(val)
}
// const radioChange = () => {
//   console.log(radioName.value);
// };

onMounted(() => {});
</script>
<style lang='less'>
.el-radio-group {
  display: flex !important;
  align-items: center;
  justify-content: space-around;
  .el-radio-button:first-child .el-radio-button__inner,
  .el-radio-button:last-child .el-radio-button__inner {
    // border-left: none;
    // border: 1px solid #004064;
    border-left: 1px solid #004064;
    border-radius: 2px;
  }
  .el-radio-button__original-radio:checked + .el-radio-button__inner {
    // background: transparent;
    border-left: none;
    background: #07406a;
    border: 1px solid #00a3ff;
    color: #028cda;
  }
  .el-radio-button__inner {
    border-radius: 2px;
    color: #d6e3ea;
    font-size: 14px;
    background: #004064;
    /*background: transparent;*/
    border: 1px solid #004064;
    padding: 8px 12px;
  }
}
</style>


